<template>
    <ContentBase>
        <div class="content-top">
            <span style="font-size: 150%;">学生管理</span>
            <div class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="输入学号或姓名" aria-label="Search" v-model="search_content">
                <button class="btn btn-outline-success" @click="clickToSearch">Search</button>
            </div>
        </div>
        <div>
            <table class="table table-hover" style="text-align: center; vertical-align: middle;">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>楼栋</th>
                        <th>寝室号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="record in records" :key="record.id">
                        <td>{{ record.studentId }}</td>
                        <td>{{ record.name }}</td>
                        <td>{{ record.building }}</td>
                        <td>{{ record.dormId }}</td>
                        <td>
                            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" :data-bs-target="'#updateDorm' + record.id">修改</button>
                            <div class="modal fade" :id="'updateDorm' + record.id" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="updateDormLabel">改修信息</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="info-row" style="margin-bottom: 10px;">
                                                <label for="building" class="info-label">楼栋:</label>
                                                <input type="text" id="building" class="info-input" v-model="record.building"/>
                                            </div>
                                            <div class="info-row" style="margin-bottom: 10px;">
                                                <label for="dormId" class="info-label">寝室号:</label>
                                                <input type="text" id="dormId" class="info-input" v-model="record.dormId"/>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <div style="color: red; margin-right: 20px;" >{{ error_message }}</div>
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">关闭</button>
                                            <button type="button" class="btn btn-primary" @click="clickUpdateDorm(record)">确定</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Success Modal -->
                            <div class="modal" id="successModal" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content" style="border-radius: 8px; text-align: center;">
                                    <!-- 提示信息 -->
                                    <div class="modal-body" style="font-size: 18px; font-weight: bold; color: #555; margin: 20px 0;">
                                        修改成功
                                    </div>
                                    <!-- 确认按钮 -->
                                    <div class="modal-footer" style="border-top: none; justify-content: center; padding-bottom: 20px;">
                                        <button type="button" class="btn btn-success" data-bs-dismiss="modal" style="background-color: #28a745; border: none; padding: 10px 20px;">
                                        OK
                                        </button>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <nav aria-label="...">
                <ul class="pagination" style="float: right;">
                    <li class="page-item" @click="click_page(-2)">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
                        <a class="page-link" href="#">{{ page.number }}</a>
                    </li>
                    <li class="page-item" @click="click_page(-1)">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </ContentBase>
</template>

<script setup>
import ContentBase from '../components/ContentBase';
import $ from 'jquery';
import { useStore } from 'vuex';
import { ref } from 'vue';
import { Modal } from 'bootstrap/dist/js/bootstrap';    // 引入Modal的API

const store = useStore();
let records = ref([]);
let current_page = 1;
let total_records = 0;
let pages = ref([]);
const error_message = ref('');
const search_content = ref('');

const delay = () => {
    setTimeout(() => {
        const modalElement = document.getElementById('successModal');
        const modal = new Modal(modalElement);
        modal.show();
    }, 500)
}

const clearMessage = () => {
    error_message.value = '';
}

const clickUpdateDorm = (record) => {
    error_message.value = '';
    $.ajax({
        url: "http://localhost:3000/api/dormaddmin/update-student",
        type: "POST",
        data: {
            studentId: record.studentId,
            dormId: record.dormId,
            building: record.building,
        },
        headers: {
            'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
                Modal.getInstance('#updateDorm' + record.id).hide();  // 关闭Modal框
                delay();
            } else {
                error_message.value = resp.error_message;
                setTimeout(clearMessage, 4000);
            }
        },
        error(resp) {
            console.log(resp);
        }
    });
}

const clickToSearch = () => {
    current_page = 1
    $.ajax({
        url: "http://localhost:3000/api/dormaddmin/search-student",
        type: "GET",
        data: {
            searchContent: search_content.value,
            page: current_page
        },
        headers: {
            'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
            records.value = resp.records;
            total_records = resp.records_count;
            update_pages();
        },
        error(resp) {
            console.log(resp);
        }
    });
}

const click_page = page => {
    if (page === -2) page = current_page - 1;
    else if (page === -1) page = current_page + 1;
    
    let max_pages = parseInt(Math.ceil(total_records / 10))
    if (page >= 1 && page <= max_pages) {
        pull_page(page);
    }
}

const update_pages = () => {
    let max_pages = parseInt(Math.ceil(total_records / 10))
    let new_pages = [];
    for (let i = current_page - 2; i <= current_page + 2; i ++) {
        if (i >= 1 && i <= max_pages) {
            new_pages.push({
                number: i,
                is_active: i === current_page ? "active" : "",
            });
        }
    }
    pages.value = new_pages;
}

const pull_page = page => {
    current_page = page;
    $.ajax({
        url: "http://localhost:3000/api/dormaddmin/get-student",
        type: "GET",
        data: {
            page,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            records.value = resp.records;
            total_records = resp.records_count;
            update_pages();
        },
        error(resp) {
            console.log(resp);
        }
    })
}
pull_page(current_page);

</script>

<style scoped>

.content-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.info-row {
    display: flex;
    align-items: center; /* 确保 label 和 input 垂直居中 */
    justify-content: center;
    gap: 15px;
}

.info-label {
    font-weight: bold;
    width: 80px;
    text-align: right;
}

.info-input {
    flex: 1;
    max-width: 250px; /* 限制输入框最大宽度 */
    padding: 10px; /* 增加内边距使其更美观 */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}

</style>